<!-- 司机管理 -->
<template>
  <div class="containers">
    <TablePage
      v-model:change="driverModel.pageIndex"
      :page-list="pageList"
      :columns="tableColumns"
      :page-count="pageCount"
      @click-search="queryData"
    >
      <template #search>
        <TableSearch
          v-model:change="driverModel.deptId"
          :model="driverModel.deptId"
          :datas="jidi"
          left-title="基地"
        />
        <TableSearch
          v-model:change="driverModel.deptId"
          :model="driverModel.deptId"
          :datas="fenqu"
          left-title="分区"
        />
        <TableSearch
          v-model:change="driverModel.content"
          :model="driverModel.content"
          type="input"
          left-title="关键字"
        />
      </template>

      <template #buttons>
        <el-button type="primary" @click="addRow()"> 添加 </el-button>
      </template>
      <el-table-column fixed="right" label="操作" header-align="center" align="center" width="220">
        <template #default="scope">
          <el-button type="text" size="small" @click.prevent="openRow(scope.$index)">
            {{ scope.$index < 1 ? '控制' : '查看' }}
          </el-button>
          <el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </TablePage>

    <Dialog v-model="dialogVisible" title="设备">
      <template #content>
        <div class="flex-r" style="align-items: center">
          <el-tree
            highlight-current
            default-expand-all
            style="width: 250px"
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
          <el-divider direction="vertical" style="height: 400px" />
          <div class="flex-c" style="flex: 1">
            <el-form label-width="100px">
              <el-form-item label="所选位置">
                <p class="el-item-bg" :style="`color:${treeArray.length == 0 ? '#999' : '#666'}`">{{
                  treeArray.length == 0 ? '请在左侧选择' : treeArray.toString().slice(1)
                }}</p>
              </el-form-item>
              <el-form-item label="设备">
                <el-select v-model="sensorModel.dapengId" style="width: 100%" placeholder="请选择">
                  <el-option
                    v-for="item in depts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item v-if="sensorModel.dapengId !== ''" label="">
                <el-select
                  v-model="sensorModel.marker"
                  style="width: 100%"
                  placeholder="请选择"
                  multiple
                >
                  <el-option
                    v-for="item in deptsChild"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="sensorModel.sensorId"
                  placeholder="请输入(可以添加设备所在位置，特点等信息)"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </template>
      <template #footer>
        <ElButton type="primary" :loading="loading" @click="dialogVisible = false"> 保存 </ElButton>
        <ElButton @click="dialogVisible = false">关闭</ElButton>
      </template>
    </Dialog>

    <Dialog v-model="openDialogVisible" title="设备控制">
      <template #content>
        <p>当前状态：<span style="color: red">开启</span></p>
        <div class="flex-c">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="手动控制" name="first">
              <el-switch v-model="switchValue" inactive-text="开关"
            /></el-tab-pane>
            <el-tab-pane label="定时控制" name="second">
              <div class="block">
                <span class="demonstration">时间设置</span>
                <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                /> </div
            ></el-tab-pane>
            <el-tab-pane label="自动控制" name="third"
              >当执行农事计划时，条件满足是执行</el-tab-pane
            >
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <ElButton @click="openDialogVisible = false" type="primary">保存</ElButton>
      </template>
    </Dialog>

    <Dialog v-model="openLookVisible" title="查看数据">
      <template #content>
        <div class="flex-c">
          <img style="width: 100%; height: 100%" src="@/assets/imgs/aaa.png" fit="fill" />
        </div>
      </template>
      <template #footer>
        <ElButton @click="dialogVisible = false">关闭</ElButton>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { TableSearch } from '@/components/TableSearch'
import { TablePage } from '@/components/TablePage'
import { Dialog } from '@/components/Dialog'
import useBaseDriver from '@/composables/driver/useBaseDriver'
import useDriverRequest from '@/composables/driver/useDriverRequest'
import { ref } from 'vue'
const activeName = ref('first')
const switchValue = ref(false)
let {
  depts,
  deptsChild,
  driverModel,
  tableColumns,
  dialogVisible,
  sensorModel,
  openDialogVisible,
  jidi,
  fenqu
} = useBaseDriver()
let { pageList, pageCount, getDriverInfoListApi } = useDriverRequest()
const openLookVisible = ref(false)
const queryData = () => {
  getDriverInfoListApi(driverModel)
}

const addRow = () => {
  dialogVisible.value = true
}

const openRow = (index: number) => {
  if (index < 1) {
    openDialogVisible.value = true
  } else {
    openLookVisible.value = true
  }
}
const deleteRow = () => {
  pageList.value = []
}

interface Tree {
  label: string
  children?: Tree[]
}

const treeArray = ref([])

const handleNodeClick = (node, nodes) => {
  treeArray.value = []
  getText(nodes)
}

const getText = (data: {}) => {
  treeArray.value.unshift(data.data.label)
  if (data.parent && data.parent != undefined) {
    let parent = data.parent
    getText(parent)
  }
}

const data: Tree[] = [
  {
    label: 'tzh的基地1',
    children: [
      {
        label: '东区',
        children: [
          {
            label: '大棚'
          },
          {
            label: '大田'
          }
        ]
      },
      {
        label: '西区',
        children: [
          {
            label: '大棚'
          },
          {
            label: '大田'
          }
        ]
      }
    ]
  },
  {
    label: 'tzh的基地2',
    children: [
      {
        label: '东区',
        children: [
          {
            label: '大棚'
          },
          {
            label: '大田'
          }
        ]
      },
      {
        label: '西区',
        children: [
          {
            label: '大棚'
          },
          {
            label: '大田'
          }
        ]
      }
    ]
  }
]

const defaultProps = {
  children: 'children',
  label: 'label'
}
</script>
<style lang="less" scoped>
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: var(--el-color-primary) !important;
}
</style>
